<template>
  <div class="detail">
    <moudle-header :my-title="myTitle" :page-name="pageName"></moudle-header>
    <div class="detail-content">
    	<div class="detail-top">
    		<p class="detail-txt">100.00元起购，2017-11-15 00:00:00开标</p>
    		<div class="detail-interest">
    			<p>预期年化收益率</p>
    			<p class="detail-itr"><span>16.00</span>%</p>
    			<div class="detail-progress clear">
    				<div class="myprogress">
    					<mt-progress :value="20" :bar-height="5"></mt-progress>
    				</div>
    				<div class="mypercent">
    					20%
    				</div>
    			</div>
    		</div> 
    		<div class="detail-items clear">
    			<div>
    				<p>项目期限</p>
    				<p><span>30</span>天</p>
    			</div>
    			<div>
    				<p>项目总额</p>
    				<p><span>100000.00</span>元</p>
    			</div>
    			<div>
    				<p>项目奖励</p>
    				<p><span>1.00</span>%</p>
    			</div>
    		</div>   		
    	</div>
    	<div class="detail-main">
    		<div class="clear">
	    		<div class="detail-mitem">
	    			<p>剩余可投</p>
	    			<p>￥<span>50000.00</span>元</p>
	    		</div>
	    		<div class="detail-mitem">
	    			<p>账户余额</p>
	    			<p>￥<span>50000.00</span>元</p>
	    		</div>
    		</div>
    		<div class="detail-mainitem">
    			预期收益：<span>0.00</span>元
    		</div>
    		<div class="detail-unlogin">
    			还未登录？请先<router-link to="/login">登录</router-link>
    		</div>
    		<div class="detail-login">
    			<div class="column clear">
		            <label class="label" for="amount"><i>*</i>输入投标金额：</label>
		            <p class="control" :class="{ 'validated': errors.has('amount') }">
		              <input v-model="amount" v-validate="'required|amount'" :class="{'input': true, 'is-danger': errors.has('amount') }" name="amount" type="text" placeholder="">
		              <span v-show="errors.has('amount')" class="help is-danger">{{ errors.first('amount') }}</span>
		            </p>
		        </div>
    		</div>
    	</div>
    	<div class="detail-seeInfo" @click="showInfoFn">查看详情</div>
    	<div v-show="showInfo">
	    	<div class="detail-info">
	    		<div class="clear"><label>还款方式 :</label> <p>一次性还款</p></div>
	    		<div class="clear"><label>起投金额 :</label> <p>￥10000.00</p></div>
	    		<div class="clear"><label>借款用途 :</label> <p>短期周转</p></div>
	    		<div class="clear"><label>开标时间 :</label> <p>2017-11-18 13:30:00</p></div>
	    		<div class="clear"><label>剩余时间 :</label> <p></p></div>
	    	</div>
	    	<div class="detail-info">
	    		<div class="clear"><label>真实姓名 :</label> <p>一次性还款</p></div>
	    		<div class="clear"><label>性别 :</label> <p>女</p></div>
	    		<div class="clear"><label>婚姻状况 :</label> <p>已婚</span></p></div>
	    		<div class="clear"><label>月收入(元) :</label> <p>50000以上</p></div>
	    		<div class="clear"><label>年龄 :</label> <p>37岁</p></div>
	    		<div class="clear"><label>户籍所在地 :</label> <p>浙江省-温州市</p></div>
	    		<div class="clear"><label>是否购车 :</label> <p>是</p></div>
	    		<div class="clear"><label>学历 :</label> <p>大专或本科</p></div>
	    	</div>
    	</div>
    </div>
    <moudle-footer :active-page="activePage"></moudle-footer>     
  </div>
</template>

<script>
import moudleHeader from '../../components/headerComponent';
import moudleFooter from '../../components/footerComponent';
export default {
  name: 'InvestDetail',
  components: {moudleHeader,moudleFooter},
  data () {
    return {
    	showInfo:false,
    	myTitle:'11月18号 13:30 约 1月 奔驰一号标',
    	pageName:'detail',
    }
  },
  methods:{
  	showInfoFn(){
  		if(this.showInfo){
  			this.showInfo = false
  		}else{
  			this.showInfo = true;
  		}
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.detail {
	padding-bottom: 3.5rem;
}
.detail-content {
	font-size: 90%;	
	.detail-top {
		padding: 1.5rem 0 0 0;
		background:#fff;
		.detail-txt {
			text-align: center;
			color: #fdb563;
		}
		.detail-interest {
			text-align: center;
			margin: 2.5rem 0;
			.detail-itr {
				color: #f50006;
				font-size: 150%;
				margin: .5rem auto;
				span {
					font-size: 180%;
					color: #f50006;
				}
			}
			.detail-progress {
				width: 58%;
				margin: 0 auto;
				.myprogress {
					width: 80%;
					float: left;
				}
				.mypercent {
					width: 16%;
					margin-left: 4%;
					float: left;
					line-height: 2rem;
				}
			}
		}
		.detail-items {
			display:flex;
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			>div {				
				float: left;
				border-right: 1px solid #eee;
				text-align: center;
				padding: .8rem 0;
				span {
					font-size: 120%;
					color: #000;
					margin-top: .5rem;
				}
				p:nth-child(2){
					margin-top: .5rem;
				}
			}
			>div:first-child {
				width: 30%;
			}
			>div:nth-child(2){
				width: 40%;
			}			
			>div:last-child {
				width: 30%;
				border-right:none;
			}
		}		
	}
	.detail-main {
		padding: 1.5rem 0;
		background: #fff;
		margin-top: .3rem;
		div.detail-mitem {
			width: 50%;
			float: left;
			text-align: center;
			border-right: 1px solid #eee;
			span {
				font-size: 150%;
				color: #f50006;
			}
			p:last-child {
				margin-top: .3rem;
			}
		}
		>div:last-child {
			border-right:none;
		}
		.detail-mainitem {
			font-size: 140%;
			line-height: 2rem;
			margin-top: 1.5rem;
			padding-top: 1.5rem;
			text-align: center;
			border-top: 1px solid #eee;
			span {
				font-size: 160%;
				color: #f50006;
			}
		}
		.detail-unlogin {
			width: 70%;
			height: 2rem;
			line-height: 2rem;
			text-align: center;
			color: #999;
			margin: 1rem auto 0 auto;
			border: 1px solid #ddd;
			border-radius: 5px;
			a {
				color: #333;
			}
		}
		.detail-login {
			width: 90%;
			margin: 0 auto;
			.column {
			    line-height: 2rem;
			    margin-top: 1rem;
			    label {
			      width: 35%;
			      float: left;
			      text-align:right;
			      i {
			        color:#f50006;
			        margin-right: 10px;
			      }
			    }
			    label.btitle {
			      width: 30%;
			    }
			    label.award {
			      width: 50%;
			    }
			    .control {
			      .byday {
			        input {
			          width: 16px;
			          height: 16px;
			          float: left;
			          margin: .5rem .5rem 0 0;
			        }
			        span {
			          float: left;
			        }
			        
			      }
			      .is-danger {
			        color: #f50006;
			      }
			      select {
			        width: 100%;
			        height: 2rem;
			        border: 1px solid #ddd;
			      }
			    }
			    .control.itextarea {
			      width: 70%;
			    }
			    .control.itextarea textarea {
			      width: 100%;
			      border: 1px solid #ddd;
			    }
			    .control.award {
			      width: 50%;
			    }
			    .control.btitle {
			      width: 70%;
			    }
			    p {
			      width: 65%;
			      float: left;
			      height: 100%;
			      input {
			        width: 100%;
			        height: 2rem;
			        border: 1px solid #ddd;
			      }
			    }
			  }
		}
	}
	.detail-seeInfo {
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		background: #fff;
		color: #999;
		margin-top: .3rem;
	}
	.detail-info {
		padding: 1rem 1.5rem;
		background: #fff;
		margin-top: .3rem;		
		>div {
			line-height: 2rem;			
			label,p {
				float: left;
			}
			label {
				width: 22%;
				color: #999;
				text-align: right;
			}
			span {
				color: #333;
			}
		}
	}
}
</style>
